<!--  -->
<template>
  <div class="detail-main">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header">
        <span>新增文章</span>
      </div>
      <div class="from-main">
        <el-form :model="news" ref="form" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="文章标题">
                <el-input class="ipt" v-model="news.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者">
                <el-input class="ipt" v-model="news.author"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="内容描述">
            <el-input type="textarea" style="width:90%" v-model="news.desc"></el-input>
          </el-form-item>

          <el-form-item label="是否火热">
            <el-switch
              v-model="news.hot"
              :active-value="'1'"
              :inactive-value="'0'"
              active-color="#13ce66"
              inactive-color="#C0CCDA"
            ></el-switch>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="阅读量:">
                <el-input-number v-model="news.viewCount" :min="1" :max="10000" label="阅读量:"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点赞数:">
                <el-input-number v-model="news.zanCount" :min="1" :max="10000" label="阅读量:"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="封面图片">
                <el-button type="primary" style="float:left" @click="openImg">点击选择图片</el-button>
                <img style="float:left;margin-left:100px" class="coverimg" :src="news.cover" alt />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否设为封面">
                <el-switch
                  v-model="isImg"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#C0CCDA"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="选择富文本类型">
            <el-radio-group v-model="news.type">
              <el-radio :label="'0'">富文本编辑</el-radio>
              <el-radio :label="'1'">markdown</el-radio>
            </el-radio-group>
          </el-form-item>
          <Tinymce v-if="news.type==='0'" :height="300" v-model="news.content1" />
          <Markdown v-else v-model="news.content1"></Markdown>
          <el-form-item style="float:right; margin:20px ">
            <el-button type="primary" @click="addNews">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <Choseimg ref="choseimg" @addCoverImg="saveCoverImg"></Choseimg>
  </div>
</template>

<script>
const _ = require("lodash");
const hosts = require("@/settings");
import { saveNews, newsDetail, editNews } from "@/api/material/news";
import Choseimg from "@/components/Tinymce/components/Material";
import Tinymce from "@/components/Tinymce/index";
import Markdown from "@/components/MarkdownEditor/index";
export default {
  name: "NewsDetail",
  components: {
    Tinymce,
    Choseimg,
    Markdown,
  },
  data() {
    return {
      isImg: 1,
      host: hosts.host,
      news: {
        hot: "0",
        type: "0",
        cover: "",
      },
      content: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    saveCoverImg(v) {
      this.news.cover = v;
    },
    openImg() {
      this.$refs.choseimg.openDialog(0);
    },
    init() {
      var id = this.$route.params.id;
      if (this.$route.params.id) {
        newsDetail({ id }).then((res) => {
          this.news = res.data;
        });
      }
    },
    addNews() {
      var api = null;
      var obj1 = this.news;
      if (!this.isImg) {
        obj1.cover = "";
      }
      console.log(obj1);
      var obj = {
        xyNews: {
          ...obj1,
        },
      };

      if (this.$route.params.id) {
        api = editNews;
      } else {
        api = saveNews;
      }
      api(obj).then((res) => {
        if (res.code == "success") {
          this.news = {
            hot: 0,
            type: 0,
            cover: "",
          };
          this.$router.push({ name: "News" });
        }
      });
    },
  },
};
</script>

<style  lang='scss' scoped >
.detail-main {
  padding: 20px;
  .from-main {
    padding: 50px;
    .ipt {
      width: 300px;
      float: left;
    }
    ::v-deep .tinymce {
      width: 90%;
    }
    ::v-deep .te-md-splitter {
      width: 100%;
    }
    .coverimg {
      // display: block;
      transform: translateY(-10px);
      height: 60px;
    }
  }
}
</style>
